import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './TeamCard.less';

export default class TeamCard extends Component {


    render() {
        const {
            addToday,
            avatar,
            friends,
            myTeam,
            name,
            personal
        } = this.props.info || {};

        return (
            <div className='team-card'>
                <Link to='/rank' className='rank-button'>团队排名</Link>
                <div className='card-user'>
                    <img className="avatar" src={avatar} alt="" />
                    <div className='avatar-user-info'>
                        <div className='name'>{name}</div>
                        <div className='identity'>ID:{personal}</div>
                    </div>
                </div>
                <div className='card-info'>
                    <div className='info-item'>
                        <div className='info-num'>{addToday}人</div>
                        <div>
                            <img className='info-icon' src={require('../../../images/team_icon4.png')} alt="" />
                            <span className='info-text'>今日新增</span>
                        </div>
                    </div>
                    <div className='info-item'>
                        <div className='info-num'>{friends}人</div>
                        <div>
                            <img className='info-icon' src={require('../../../images/team_icon2.png')} alt="" />
                            <span className='info-text'>我的伙伴</span>
                        </div>
                    </div>
                    <div className='info-item'>
                        <div className='info-num'>{myTeam}人</div>
                        <div>
                            <img className='info-icon' src={require('../../../images/team_icon1.png')} alt="" />
                            <span className='info-text'>我的团队</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
